<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentUser, getUserProfile, updateUserProfile } from '../services/auth'
import { getVideosByUserId, deleteVideo } from '../services/video'

const router = useRouter()

// 用户数据
const userData = ref({
  id: 1,
  username: '测试用户',
  email: 'test@example.com',
  avatar: 'https://picsum.photos/id/177/200/200',
  bio: '这是一个测试用户的个人简介，喜欢分享各种类型的视频内容。',
  gender: '男',
  createdAt: '2023-01-15T08:30:00Z',
  membership: {
    level: 'premium',
    expireDate: '2024-12-31T23:59:59Z'
  },
  statistics: {
    videos: 15,
    followers: 2345,
    following: 123,
    likes: 12345
  }
})

// 当前选中的标签页
const activeTab = ref('videos') // 'videos', 'favorites', 'likes'
const isLoading = ref(true)
const error = ref('')
const isContentLoading = ref(false)

// 获取用户数据
const loadUserData = async () => {
  try {
    const currentUser = getCurrentUser()
    if (!currentUser) {
      router.push('/login')
      return
    }
    
    // 获取完整的用户信息
    const fullUser = getUserProfile(currentUser.id)
    if (fullUser) {
      userData.value = {
        ...fullUser,
        membership: fullUser.membership || {
          level: 'basic',
          expireDate: null,
          activatedDate: fullUser.createdAt
        }
      }
    } else {
      // 如果没找到，使用基本信息
      userData.value = {
        ...currentUser,
        gender: '男',
        bio: '',
        createdAt: new Date().toISOString(),
        statistics: {
          videos: 0,
          followers: 0,
          following: 0,
          likes: 0
        },
        membership: {
          level: 'basic',
          expireDate: null,
          activatedDate: new Date().toISOString()
        }
      }
    }
    
    // 确保用户数据已渲染完成后，再加载内容数据
    await nextTick()
    
    // 标记内容开始加载
    isContentLoading.value = true
    
    // 并行加载视频和收藏数据，提升性能
    await Promise.all([
      loadUserVideos(),
      loadUserFavorites()
    ])
    
  } catch (err) {
    error.value = '加载用户数据失败'
    console.error('Failed to load user data:', err)
  } finally {
    isLoading.value = false
    // 延迟关闭内容加载状态，确保用户体验流畅
    setTimeout(() => {
      isContentLoading.value = false
    }, 100)
  }
}

// 编辑模式状态
const isEditMode = ref(false)

// 编辑表单数据
const editForm = ref({})

// 用户视频数据
const userVideos = ref([])

// 模拟用户收藏视频
const userFavorites = ref([])

// 加载用户视频数据
const loadUserVideos = async () => {
  try {
    const videos = await getVideosByUserId(currentUser.value.id)
    userVideos.value = videos
  } catch (error) {
    console.error('加载用户视频失败:', error)
  }
  // 返回Promise以确保Promise.all能正确等待数据加载完成
  return new Promise((resolve) => {
    // 模拟异步加载，使用setTimeout模拟网络延迟
    setTimeout(() => {
      userVideos.value = [
        {
          id: 1,
          title: '【动画】我的收藏夹分享',
          cover: 'https://picsum.photos/id/20/320/180',
          views: '5.2万',
          likes: '3245',
          uploadDate: '2024-01-10'
        },
        {
          id: 2,
          title: '【游戏】新游戏试玩体验',
          cover: 'https://picsum.photos/id/21/320/180',
          views: '8.7万',
          likes: '5678',
          uploadDate: '2024-01-05'
        },
        {
          id: 3,
          title: '【美食】简单易学的家常菜',
          cover: 'https://picsum.photos/id/22/320/180',
          views: '3.4万',
          likes: '2134',
          uploadDate: '2023-12-28'
        }
      ]
      resolve()
    }, 300) // 减少延迟时间
  })
}

// 懒加载用户收藏数据
const loadUserFavorites = async () => {
  // 返回Promise以确保Promise.all能正确等待数据加载完成
  return new Promise((resolve) => {
    // 模拟异步加载，使用setTimeout模拟网络延迟
    setTimeout(() => {
      userFavorites.value = [
        {
          id: 4,
          title: '【音乐】流行歌曲合集',
          cover: 'https://picsum.photos/id/23/320/180',
          uploader: '音乐频道',
          views: '12.3万',
          addedDate: '2024-01-12'
        },
        {
          id: 5,
          title: '【科技】最新科技产品评测',
          cover: 'https://picsum.photos/id/24/320/180',
          uploader: '科技达人',
          views: '9.8万',
          addedDate: '2024-01-11'
        },
        {
          id: 6,
          title: '【旅行】日本旅游攻略',
          cover: 'https://picsum.photos/id/25/320/180',
          uploader: '旅行日记',
          views: '7.6万',
          addedDate: '2024-01-09'
        }
      ]
      resolve()
    }, 400) // 减少延迟时间
  })
}

// 表单验证状态
const validationErrors = ref({})

// 计算属性：格式化注册日期
const formattedCreatedAt = computed(() => {
  const date = new Date(userData.value.createdAt)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// 计算属性：格式化会员有效期
const formattedMembershipExpireDate = computed(() => {
  if (!userData.value?.membership?.expireDate) return '永久有效'
  const date = new Date(userData.value.membership.expireDate)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
})

// 计算属性：会员等级名称（替换原有的getMembershipLevelName方法）
const membershipLevelName = computed(() => {
  const levels = {
    'basic': '普通会员',
    'premium': '高级会员',
    'vip': 'VIP会员'
  }
  return levels[userData.value?.membership?.level] || '普通用户'
})

// 计算属性：会员状态（是否即将过期）
const membershipStatus = computed(() => {
  if (!userData.value?.membership?.expireDate) return {
    status: 'permanent',
    text: '永久有效'
  }
  
  const now = new Date()
  const expireDate = new Date(userData.value.membership.expireDate)
  const daysLeft = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24))
  
  if (daysLeft < 0) {
    return {
      status: 'expired',
      text: '已过期'
    }
  } else if (daysLeft <= 7) {
    return {
      status: 'expiring-soon',
      text: `${daysLeft}天后过期`
    }
  } else {
    return {
      status: 'active',
      text: `${daysLeft}天后过期`
    }
  }
})

// 计算属性：格式化用户统计数据
const formattedStatistics = computed(() => {
  const stats = userData.value?.statistics || {}
  return {
    videos: stats.videos,
    followers: formatNumber(stats.followers || 0),
    following: formatNumber(stats.following || 0),
    likes: formatNumber(stats.likes || 0)
  }
})

// 计算属性：编辑表单验证状态
const isEditFormValid = computed(() => {
  if (!editForm.value.username || editForm.value.username.trim().length < 2) {
    return false
  }
  
  if (!editForm.value.email) {
    return false
  }
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editForm.value.email)) {
    return false
  }
  
  return true
})

// 辅助函数：格式化数字（添加千分位）
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 切换编辑模式
const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
  if (isEditMode.value) {
    // 进入编辑模式时，复制当前数据到表单
    editForm.value = { ...userData.value }
    validationErrors.value = {}
  }
}

// 表单验证
const validateForm = () => {
  const errors = {}
  
  if (!editForm.value.username || editForm.value.username.trim().length < 2) {
    errors.username = '用户名至少需要2个字符'
  }
  
  if (!editForm.value.email) {
    errors.email = '请输入邮箱地址'
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editForm.value.email)) {
    errors.email = '请输入有效的邮箱地址'
  }
  
  validationErrors.value = errors
  return Object.keys(errors).length === 0
}

// 保存更改
const saveChanges = () => {
  if (validateForm()) {
    // 调用API保存数据
    const success = updateUserProfile(editForm.value)
    
    if (success) {
      userData.value = { ...editForm.value }
      isEditMode.value = false
      alert('个人信息已更新')
    } else {
      alert('保存失败，请重试')
    }
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditMode.value = false
  // 重置表单和验证错误
  editForm.value = { ...userData.value }
  validationErrors.value = {}
}

// 处理头像上传预览
const handleAvatarUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 创建预览URL
    const reader = new FileReader()
    reader.onload = (e) => {
      editForm.value.avatar = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

// 导航到视频详情页
const goToVideo = (videoId) => {
  router.push(`/video/${videoId}`)
}

// 编辑视频
const editVideo = (videoId) => {
  // 这里可以实现视频编辑功能，暂时跳转到上传页面
  router.push(`/upload-video?edit=${videoId}`)
}

// 确认删除视频
const confirmDeleteVideo = (videoId) => {
  if (confirm('确定要删除这个视频吗？此操作不可恢复。')) {
    deleteVideo(videoId, currentUser.value.id)
      .then(result => {
        if (result.success) {
          // 从列表中移除视频
          userVideos.value = userVideos.value.filter(video => video.id !== videoId)
          alert('视频删除成功')
        } else {
          alert(`删除失败: ${result.error}`)
        }
      })
      .catch(error => {
        console.error('删除视频失败:', error)
        alert('删除视频失败，请稍后重试')
      })
  }
}

// 上传新视频
const uploadNewVideo = () => {
  router.push('/upload-video')
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
  // 根据切换的标签页加载相应的数据
  if (tab === 'videos' && userVideos.value.length === 0) {
    loadUserVideos()
  } else if (tab === 'favorites' && userFavorites.value.length === 0) {
    loadUserFavorites()
  }
}

// 组件挂载时加载用户数据
onMounted(() => {
  loadUserData()
  // 默认加载视频数据
  loadUserVideos()
})
</script>

<template>
  <div class="user-profile">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      <span class="back-icon">←</span>
      <span class="back-text">返回</span>
    </button>

    <!-- 个人信息区域 -->
    <div class="profile-header">
      <div class="profile-cover"></div>
      
      <div class="profile-content">
        <!-- 头像区域 -->
        <div class="avatar-section">
          <div class="avatar-wrapper">
            <img 
              :src="isEditMode ? editForm.avatar : userData.avatar" 
              :alt="userData.username" 
              class="user-avatar"
            />
            
            <!-- 编辑模式下显示上传头像按钮 -->
            <div v-if="isEditMode" class="avatar-upload">
              <input 
                type="file" 
                id="avatar-upload" 
                accept="image/*" 
                @change="handleAvatarUpload"
                class="avatar-input"
              />
              <label for="avatar-upload" class="avatar-upload-label">
                <span class="upload-icon">📷</span>
                <span class="upload-text">更换头像</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 用户信息和操作按钮 -->
        <div class="user-info-section">
          <div class="user-main-info">
            <h1 class="username">
              <template v-if="isEditMode">
                <input 
                  v-model="editForm.username" 
                  class="edit-input username-input" 
                  placeholder="输入用户名"
                />
                <span v-if="validationErrors.username" class="error-text">{{ validationErrors.username }}</span>
              </template>
              <template v-else>
                {{ userData.username }}
                <span v-if="userData.membership.level !== 'basic'" class="membership-badge" :class="`membership-${userData.membership.level}`">
                  {{ membershipLevelName }}
                </span>
              </template>
            </h1>
            
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-number">{{ formattedStatistics.videos }}</span>
                <span class="stat-label">视频</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ formattedStatistics.followers }}</span>
                <span class="stat-label">粉丝</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ formattedStatistics.following }}</span>
                <span class="stat-label">关注</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ formattedStatistics.likes }}</span>
                <span class="stat-label">获赞</span>
              </div>
            </div>
          </div>

          <!-- 编辑/保存/取消按钮 -->
          <div class="action-buttons">
            <button 
              v-if="!isEditMode"
              class="edit-button"
              @click="toggleEditMode"
            >
              编辑资料
            </button>
            
            <div v-else class="edit-mode-buttons">
              <button 
                class="save-button"
                @click="saveChanges"
                :disabled="!isEditFormValid"
              >
                保存更改
              </button>
              <button 
                class="cancel-button"
                @click="cancelEdit"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细个人信息 -->
    <div class="profile-details">
      <div class="detail-section">
        <div class="detail-title">个人简介</div>
        <div class="detail-content">
          <div v-if="isEditMode">
            <textarea 
              v-model="editForm.bio" 
              class="edit-textarea" 
              rows="3"
              placeholder="介绍一下自己..."
            ></textarea>
          </div>
          <div v-else>{{ userData.bio || '该用户还没有填写个人简介' }}</div>
        </div>
      </div>

      <div class="detail-section">
        <div class="detail-title">基本信息</div>
        <div class="detail-content">
          <div class="info-item">
            <span class="info-label">邮箱：</span>
            <div v-if="isEditMode" class="edit-field">
              <input 
                v-model="editForm.email" 
                class="edit-input" 
                type="email"
                placeholder="输入邮箱地址"
              />
              <span v-if="validationErrors.email" class="error-text">{{ validationErrors.email }}</span>
            </div>
            <span v-else>{{ userData.email }}</span>
          </div>
          
          <div class="info-item">
            <span class="info-label">性别：</span>
            <div v-if="isEditMode">
              <select v-model="editForm.gender" class="edit-select">
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="保密">保密</option>
              </select>
            </div>
            <span v-else>{{ userData.gender }}</span>
          </div>
          
          <div class="info-item">
            <span class="info-label">注册时间：</span>
            <span>{{ formattedCreatedAt }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">会员等级：</span>
            <span>{{ membershipLevelName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">会员有效期：</span>
            <span>{{ formattedMembershipExpireDate }}</span>
            <span v-if="membershipStatus.status !== 'permanent'" class="membership-status" :class="`status-${membershipStatus.status}`">
              ({{ membershipStatus.text }})
            </span>
          </div>
          <div class="info-item membership-action">
            <button class="membership-btn" @click="router.push('/membership')">
              管理会员
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 用户内容标签页 -->
    <div class="user-content">
      <div class="profile-actions">
        <button class="primary-btn upload-btn" @click="uploadNewVideo">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line><line x1="12" y1="8" x2="12" y2="16"></line></svg>
          上传新视频
        </button>
      </div>
      <div class="content-tabs">
        <div 
          class="tab" 
          :class="{ active: activeTab === 'videos' }"
          @click="switchTab('videos')"
        >
          我的视频
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'favorites' }"
          @click="switchTab('favorites')"
        >
          我的收藏
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'likes' }"
          @click="switchTab('likes')"
        >
          我的点赞
        </div>
      </div>

      <!-- 视频列表 -->
      <div v-if="activeTab === 'videos'" class="videos-grid">
        <div 
          v-for="video in userVideos" 
          :key="video.id" 
          class="video-card"
          @click="goToVideo(video.id)"
        >
          <div class="video-thumbnail">
            <img :src="video.cover" :alt="video.title" class="thumbnail-img" />
          </div>
          <div class="video-info">
            <div class="video-title">{{ video.title }}</div>
            <div class="video-stats">
              <span class="stat-text">{{ video.views }}次播放</span>
              <span class="stat-text">{{ new Date(video.createdAt).toLocaleDateString() }}</span>
            </div>
            <div class="video-actions">
              <button class="edit-btn" @click.stop="editVideo(video.id)">编辑</button>
              <button class="delete-btn" @click.stop="confirmDeleteVideo(video.id)">删除</button>
            </div>
          </div>
        </div>
        <!-- 空状态提示 -->
        <div v-if="userVideos.length === 0" class="empty-state">
          <p>暂无视频内容</p>
        </div>
      </div>

      <!-- 收藏列表 -->
      <div v-if="activeTab === 'favorites'" class="favorites-list">
        <div 
          v-for="video in userFavorites" 
          :key="video.id" 
          class="favorite-item"
          @click="goToVideo(video.id)"
        >
          <div class="favorite-thumbnail">
            <img :src="video.cover" :alt="video.title" class="thumbnail-img" />
          </div>
          <div class="favorite-info">
            <div class="video-title">{{ video.title }}</div>
            <div class="uploader-name">{{ video.uploader }}</div>
            <div class="favorite-stats">
              <span class="stat-text">{{ video.views }}次播放</span>
              <span class="stat-text">收藏于 {{ video.addedDate }}</span>
            </div>
          </div>
        </div>
        <!-- 空状态提示 -->
        <div v-if="userFavorites.length === 0" class="empty-state">
          <p>暂无收藏内容</p>
        </div>
      </div>

      <!-- 点赞列表 -->
      <div v-if="activeTab === 'likes'" class="likes-list">
        <div class="empty-state">
          <p>点赞功能开发中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-profile {
  min-height: calc(100vh - 60px);
  background-color: var(--background-color);
}

/* 空状态样式 */
.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 16px;
}

/* 返回按钮 */
.back-button {
  position: fixed;
  top: 70px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: var(--hover-background);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.back-icon {
  font-size: 16px;
}

/* 个人信息头部 */
.profile-header {
  position: relative;
}

.profile-cover {
  height: 200px;
  background: linear-gradient(135deg, #fb7299 0%, #fc508a 100%);
}

.profile-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  margin-top: -80px;
  display: flex;
  gap: 24px;
}

/* 头像区域 */
.avatar-section {
  flex-shrink: 0;
}

.avatar-wrapper {
  position: relative;
}

.user-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* 编辑模式下的头像上传 */
.avatar-upload {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  overflow: hidden;
}

.avatar-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.avatar-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.upload-icon {
  font-size: 16px;
}

.upload-text {
  display: none;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.avatar-upload:hover .upload-text {
  display: block;
}

/* 用户信息部分 */
.user-info-section {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.user-main-info {
  flex: 1;
}

.username {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.user-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 12px;
}

.edit-button,
.save-button,
.cancel-button {
  padding: 10px 24px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.edit-button {
  background-color: var(--hover-background);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.edit-button:hover {
  background-color: var(--border-color);
}

.save-button {
  background-color: var(--primary-color);
  color: white;
}

.save-button:hover {
  background-color: #e06491;
}

.cancel-button {
  background-color: var(--white);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.cancel-button:hover {
  background-color: var(--hover-background);
}

.membership-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 12px;
  vertical-align: middle;
}

/* 会员状态样式 */
.membership-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 500;
}

.status-active {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.status-expiring-soon {
  background-color: rgba(255, 149, 0, 0.1);
  color: #ff9500;
}

.status-expired {
  background-color: rgba(255, 69, 58, 0.1);
  color: #ff453a;
}

.membership-premium {
  background-color: rgba(255, 215, 0, 0.2);
  color: #d4af37;
  border: 1px solid #d4af37;
}

.membership-vip {
  background-color: rgba(255, 140, 0, 0.2);
  color: #ff8c00;
  border: 1px solid #ff8c00;
}

.membership-btn {
  background-color: #667eea;
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.membership-btn:hover {
  background-color: #5a67d8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.membership-action {
  margin-top: 12px;
  justify-content: flex-start;
}

/* 详细信息区域 */
.profile-details {
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.detail-section {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.detail-content {
  color: var(--text-primary);
  line-height: 1.6;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.info-label {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 80px;
}

/* 编辑模式样式 */
.edit-input,
.edit-select,
.edit-textarea {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 16px;
  color: var(--text-primary);
  background-color: var(--white);
  width: 100%;
  transition: border-color 0.3s ease;
}

.username-input {
  font-size: 28px;
  font-weight: 600;
  padding: 4px 8px;
}

.edit-input:focus,
.edit-select:focus,
.edit-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.error-text {
  color: var(--error-color);
  font-size: 12px;
}

/* 用户内容标签页 */
.user-content {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
  }

  .profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .primary-btn {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
  }

  .primary-btn:hover {
    background-color: #cc0000;
  }

  .video-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .edit-btn, .delete-btn {
    padding: 4px 8px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
  }

  .edit-btn:hover {
    background-color: #f8f8f8;
  }

  .delete-btn:hover {
    background-color: #ff0000;
    color: white;
    border-color: #ff0000;
  }

.content-tabs {
  display: flex;
  gap: 16px;
  background-color: var(--white);
  padding: 0 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.tab {
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.tab.active {
  color: var(--primary-color);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 3px 3px 0 0;
}

/* 视频网格 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.video-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.video-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.video-stats {
  display: flex;
  gap: 12px;
}

.stat-text {
  font-size: 13px;
  color: var(--text-light);
}

/* 收藏列表 */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorite-item {
  display: flex;
  gap: 16px;
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.favorite-item:hover {
  background-color: var(--hover-background);
  box-shadow: var(--shadow-md);
}

.favorite-thumbnail {
  width: 200px;
  aspect-ratio: 16/9;
  flex-shrink: 0;
}

.favorite-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.uploader-name {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.favorite-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-light);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .profile-details {
    grid-template-columns: 1fr;
  }
  
  .back-button {
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
  }
}

@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
  }
  
  .user-avatar {
    width: 120px;
    height: 120px;
  }
  
  .user-info-section {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .username {
    font-size: 24px;
  }
  
  .user-stats {
    justify-content: center;
    gap: 16px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .edit-button,
  .save-button,
  .cancel-button {
    flex: 1;
    max-width: 150px;
  }
  
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .favorite-item {
    flex-direction: column;
  }
  
  .favorite-thumbnail {
    width: 100%;
  }
  
  .profile-details,
  .user-content {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .content-tabs {
    overflow-x: auto;
    padding: 0 12px;
    gap: 8px;
  }
  
  .tab {
    padding: 12px 8px;
    font-size: 14px;
  }
  
  .user-stats {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .back-text {
    display: none;
  }
}
</style>